<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: pink;
            display: flex;
            align-items: center;/*水平居中*/
            justify-content: center;/*垂直居中*/
            flex-direction: row;
        }
        .heart{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            transform: rotate(45deg);
            animation: heartbit 2s alternate infinite;/*循环时间1s 加循播放*/
            animation: hear 4s infinite ease-in-out;
            box-shadow: 0 0 30px red;
        }
        .heart::before{
            content:"";
            width: 50px;
            height: 25px;
            background-color: red;
            left: 0;
            top: -22px;
            position: absolute;
            border-radius: 100px 100px 0 0;
            box-shadow: 0 0 30px red;
        }
        .heart::after{
            content:"";
            width:25px;
            height:50px;
            background-color: red;
            left: -22px;
            top: 0px;
            position: absolute;
            border-radius: 100px 0 0 100px;/*左上 右上 右下 左下*/
            box-shadow: 0 0 30px red;
        }
        /*实现动画*/
        @keyframes heartbit{
            0%{
                transform: rotate(45deg) scale(0.6);
            }
            /*25%{
                transform: rotate(45deg) scale(0.8);
            }
            50%{
                transform: rotate(45deg) scale(1);
            }
            75%{
                transform: rotate(45deg) scale(1.2);
            }*/
            100%{
                transform: rotate(45deg) scale(1.4);
            }
        }
        @keyframes hear{
            0%{
            transform: translate(-100px,0px);
        }
        100%{
            transform: translate(1800px,0px);
        }
        }
        .container{
        width: 300px;
        height: 300px;
        margin: 50px;
    }
    .person{
        position: absolute;
        left:150px;
        top:160px;
        animation:sprint 4s infinite ease-in ;
    }
    .head{
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 5px solid #fff;
        left:-6px;
        top:-30px;
        animation: bob 2s infinite alternate;
    }
    .torso{
        width: 0;
        height: 60px;
        border-left:5px solid #fff;
        position: absolute;
        left:0;
        top:25px;
    }
    .person .part.arm{
        width: 40px;
        height:45px;
        position: absolute;
        border-left: 5px solid #fff;
        border-bottom: 5px solid #fff;
        right: -15px;
        top:35px;
        transform-origin: 0% 0% 0px;
        animation: pump 1s infinite ease-in-out;
     }
    .person.part{
        position: absolute;
        left:0;
        top:-75px;
    }
    .person .part.arm.one{
        transform: rotate3d(0,0,1,80deg);
     }
    .person .part.arm.two{
        transform: rotate3d(0,0,1,-80deg);
        animation-delay:0.5s ;
     }
    .person .part.leg{
        width: 60px;
        height:60px;
        position: absolute;
        border-right: 5px solid #fff;
        border-top: 5px solid #fff;
        right: -35px;
        top:80px;
        transform-origin: 0% 0% 0px;
        animation: run 1s infinite ease-in;
    }
    .person .part.leg.one{
        transform: rotate3d(0,0,1,100deg);
    }
    .person .part.leg.two{
        transform: rotate3d(0,0,1,10deg);
        animation-delay:0.5s ;
    }
    @keyframes bob {
        0%{
            transform:rotate3d(0,0,1,5deg) ;
        }
        25%{
            transform:rotate3d(0,0,1,-30deg)skew(15deg 0deg) ;
        }
        75%{
            transform:rotate3d(0,0,1,5deg) ;
        }
        100%{
            transform:rotate3d(0,0,1,-30deg)skew(15deg 0deg) ;
        }
    }
    @keyframes pump{
        0%{
            transform:rotate3d(0,0,1,80deg) ;
        }
        50%{
            transform:rotate3d(0,0,1,-70deg) ;
        }
        100%{
            transform:rotate3d(0,0,1,80deg) ;
        }
    }
    @keyframes run{
        0%{
            transform:rotate3d(0,0,1,-25deg) ;
        }
        50%{
            transform:rotate3d(0,0,1,125deg) ;
        }
        100%{
            transform:rotate3d(0,0,1,-25deg) ;
        }
    }
    @keyframes sprint{
        0%{
            transform: translate(-200px,0px);
        }
        100%{
            transform: translate(1800px,0px);
        }
    }
    </style>
</head>
<body>
    <div class="heart"></div>
    <div class="box"></div>
    <div class="container">
        <div class="person">
            <div class="head">
                <div class="part arm one"></div>
                <div class="part arm two"></div>
                <div class="torso"></div>
                <div class="part leg one"></div>
                <div class="part leg two"></div>
            </div>
        </div>
    </div>
</body>
</html>